{% extends "cmdb/index.html" %}
{% block title %}服务器列表{% endblock %}
{% block style %}

{% endblock %}
{% block breadcrumb  %}
    <ul class="breadcrumb">
							<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="#">Home</a>
							</li>
                            <li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="#">服务器管理</a>
							</li>
							<li class="active">服务器列表</li>
						</ul><!-- /.breadcrumb -->
    <br>
{% endblock %}
{% block page-header %}

    <h1>
        Dashboard
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
        服务器管理 &amp; 服务器列表
        </small>
        </h1>
    <br>

{% endblock %}

{% block content %}
{% include "cmdb/search_form.html"  %}
   <div id="mytable">
    <table class="table table-striped" id="gridtable" width="100%" border="0.5">
        <thead>
        <tr>
            <th><input type="checkbox" name="check" id="all"/> </th>
            <th>ID</th>
            <th>IP1</th>
            <th>IP2</th>
            <th>内网IP</th>
            <th>用途</th>
            <th>状态</th>
            <th>ssh端口</th>
            <th>平台</th>
            <th>机房位置</th>
        </tr>
        </thead>
        {% for i in posts  %}
            <tr>
            <td><input   type="checkbox" name="check_box" value="{{ i.id }}" /> </td>
            <td class="active" >{{ i.id }}</td>
            <td class="success" >{{ i.ip }}</td>
            <td class="warning">{{ i.ip_extra }}</td>
                <td class="success">{{ i.ip_inner }}</td>
            <td class="active" >{{ i.purpose }}</td>
            <td class="success" >{{ i.get_Machine_status_display }}</td>
            <td class="active" >{{ i.port }}</td>
            <td class="success" >{{ i.platform }}</td>
            <td class="active" >{{ i.machine_room }}</td>

            </tr>
        {% endfor %}
    </table>
   </div>
    
     <div class="text-center">
    <label for="select">每页数据条数:</label>
    <select  id="mySelect">
        <option selected="selected">0</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;
    
    
    <div class="text-right">
    <ul class="pagination pagination-lg">
        <li class="disabled"><a href="#">&laquo;</a></li>
        {% for var in pagelist %}
            {% ifequal var curpage  %}
            <li class="active"><a href="{% url 'server_list' %}?curpage={{var}}&allpage={{allpage}}"> {{var}}</a></li>

            {% else %}
                <li><a href="{% url 'server_list' %}?curpage={{var}}&allpage={{allpage}}">{{var}}</a></li>
                {% endifequal %}
        {% endfor %}
    <li ><a href="#">&raquo;</a></li>
    </ul>
    </div>
    </div>



    <!-- jqGrid 分页 div gridPager -->
<div id="gridPager">
    <input  class="btn btn-default" type="button" id="add" value="添加" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="btn btn-warning" type="button" id="edit" value="编辑" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="btn btn-danger" type="button" id="delete" value="删除" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="btn btn-success" type="button" id="update_system_info" value="更新硬件信息" />

</div>
    <!--jqGrid 浏览导航栏所在-->
<p style="display:none">默认隐藏</p>
<!-- 模态框（Modal） -->
<div class="modal fade" id="mymodal"  >
    <div class="modal-dialog" style="width:520px;">
        <div class="modal-content">
            <p><button class="close" type="button" data-dismiss="modal">×</button></p>
                <hr />
                <p id="label_for_edit"  name="label_modal" class="text-center">aaaa</p>
                <!-- 模态弹出窗内容 -->
         <!-- <div class="modal-body">
            <textarea rows="2" cols="50">在这里输入回复</textarea>
          
         </div> -->
         <form id="myformid"  class="form-horizontal" method="POST" role="form"  onSubmit="return false;">
          <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
          <input type="hidden" name="id" value="">
        {% for field in form %}        
          <div class="form-group"></div>
          <label for={{ field.label }} class="col-sm-3 control-label">{{ field.label }}</label>
          <div class="col-sm-8">{{ field }} </div>
         {{ field.errors }}
     {% endfor %}
        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">

                            <button type="submit" class="btn btn-success" onclick="postform()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button  id="btn2" type="button" class="btn btn-primary"   data-dismiss="modal">关闭</button>
                        </div>
                        </div>
        </form>  
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->



{% endblock %}

    {% block scripts %}
        <script  type="text/javascript" src="/static/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    setCookie('has_post','1');
    function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

    function postform(){
       var baseurl="{% url "server_list" %}?&r="+Math.random();
       option=getCookie('option');
       var url = baseurl+"&option="+option;
       delCookie('option');
       $.ajax({
                cache: false,
                type: "POST",
                url:url,
                data:$('#myformid').serialize(),// 你的formid
                async: false,
                dataType: "json",
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    alert(data.msg);
                    delCookie('pageper');

                    $("#mymodal").modal('hide');
                    var url="{% url "server_list" %}?&r="+Math.random();
                    window.location.href=url;
                 }
            }); 
    }

     function check(){
        if (getCookie('has_post') =='ok'){
            alert('ok');
            return false;
        }else {
            setCookie('has_post','ok');
            return true;
        }
    }
$(document).ready(function() {
    //window.onload=onload;
    $('#mySelect').change(function(){
        var per=$(this).children('option:selected').val();
        delCookie('pageper');
        setCookie('pageper',per);
        var url="{% url "server_list" %}?&r="+Math.random();
        window.location.href=url;
        });

    $("#add").click(function () {
        $('p[name="label_modal"]').html("添加服务器信息");
        $('input').attr("value","");
        $('input[name="csrfmiddlewaretoken"]').attr("value","{{csrf_token}}");
        $("#mymodal").modal('show');
        setCookie('option','add');
    });


  function onload(){
    
      var modal =getCookie("modal");
      var serverid=getCookie("server_id");
      if (modal =="yes"){
        $('p[name="label_modal"]').html("编辑服务器信息");
        $('input[name="id"]').attr("value",serverid);
        $("#mymodal").modal('show');
        delCookie("modal");
        delCookie("server_id");

      }
      
  }


  function edit_somethins(sid){
      var url= "{% url "server_list" %}?option=query&r="+Math.random();
        $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:sid,csrfmiddlewaretoken:"{{csrf_token}}",option:"query"},
                    dataType: "json",
                    success: function(ret){
                        $('p[name="label_modal"]').html("编辑服务器信息");
                        $('input[name="id"]').attr("value",ret.id);
                        $('input[name="ip"]').attr("value",ret.ip);
                        $('input[name="ip_extra"]').attr("value",ret.ip_extra);
                        $('input[name="ip_inner"]').attr("value",ret.ip_inner);
                        $('input[name="port"]').attr("value",ret.port);
                        $('input[name="user"]').attr("value",ret.user);//password
                        $('input[name="password"]').attr("value",ret.password);
                        $('#id_note').val(ret.note);
                        $('input[name="machine_room"]').attr("value",ret.machine_room);
                        $('input[name="purpose"]').attr("value",ret.purpose);//purpose
                        $("#id_group option[value="+ret.group+"]").attr("selected", true);
                        $("#id_platform option[value="+ret.platform+"]").attr("selected", true);
                        $("#id_owner option[value="+ret.owner+"]").attr("selected", true);
                        $("#id_status option[value="+ret.status+"]").attr("selected", true);
                        $("#id_Machine_status option[value="+ret.Machine_status+"]").attr("selected", true);

                    },
                    error: function (msg) {
                        alert("Connection error");
                        return  false;
                    }
                }

        );
        setCookie('option','update');
        $("#mymodal").modal('show');


  }

    //编辑对应的js操作
    $("#edit").click(function () {
        var len = $("input:checkbox:checked").length;
        if (len>1){
            alert("一次只能编辑一个");
            return false;
        }
        else if  (len==0){
            alert("你还没有选中");
            return false;
        }
        var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
        chk_value.push($(this).val());
        });
        var server_id=chk_value[0];
        $('input').attr("value",""); //删除form表单的信息
        $('input[name="csrfmiddlewaretoken"]').attr("value","{{csrf_token}}"); 
        edit_somethins(server_id);

    });



    $("#delete").click(function () {
        var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
        chk_value.push($(this).val());
        });
        var server_id=chk_value.join('.');
        var len = $("input:checkbox:checked").length;
        if  (len<1){
            alert("你还没有选中");
            return false;
        }
        var result=confirm("是否删除id为:["+server_id+"]主机");
        if (! result){
            return false;
        }
        var url= "{% url "server_list" %}?option=del&r="+Math.random();
         $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:server_id,csrfmiddlewaretoken:"{{csrf_token}}",option:"delete"},
                    dataType: "json",
                     success: function(ret){
                        delCookie('pageper');
                          var url="{% url "server_list" %}?&r="+Math.random();
                          window.location.href=url;
                     },
                     error: function (msg) {
                          delCookie('pageper');
                          var url="{% url "server_list" %}?&r="+Math.random();
                          window.location.href=url;
                    }
                }
                  )
    });

   

    $("#all").click(function(){
        if(this.checked){
            $("[name=check_box]:checkbox").prop("checked", true);
        }else{
            $("[name=check_box]:checkbox").removeAttr("checked");
        }
     });

    $("#search_btn").click(function(){

    });

    $("#update_system_info").click(function () {
       var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
        chk_value.push($(this).val());
        });
        var server_id=chk_value.join('.');
        var len = $("input:checkbox:checked").length;
        if  (len<1){
            alert("你还没有选中");
            return false;
        } 
        var url= "{% url "ssh_views" %}?option=update_system_hard_info&r="+Math.random();
         $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:server_id,csrfmiddlewaretoken:"{{csrf_token}}",option:"cat"},
                    dataType: "json",
                     success: function(ret){
                        delCookie('pageper');
                        alert(ret.msg);
                         var url="{% url "server_hardinfo" %}?&r="+Math.random(); 
                     },
                     error: function (msg) {
                        alert("connections error");
                           delCookie('pageper');
                           return false;
                    }
                }
                  )
         

    });

    $("#gridtable tr td").dblclick(function () {
        var sid=$(this).parent("tr").find("td").eq(1).html();
        edit_somethins(sid);
    });


});
    </script>
        {% endblock %}
